/**
 * 加载主页所有画布页面
 */
function loadCanvasPanel() {
    let panels = [];
    let canvasListUrl = "/chaos/api/play/canvases";
    $.ajax({
        method: 'get',
        headers: {
            'token': getLoginToken()
        },
        url: canvasListUrl,
        success: function (res) {
            ensureLogin(res);
            for (const canvasInfoKey in res.body) {
                let canvasInfo = res.body[canvasInfoKey];
                let progressId = 'progress' + canvasInfo.id;
                let limitHtml = '';
                if (canvasInfo.paintIntervalTime === 0) {
                    limitHtml = '<span>不设限制</span><span style="color: red;font-size: large">&nbsp;&nbsp;随性作战!</span>';
                } else {
                    limitHtml = '<span>' + canvasInfo.paintIntervalTime + '秒1次</span><span style="color: red;font-size: large">&nbsp;&nbsp;超爽作战!</span>';
                }
                let panelHtml =
                    '<div class="layui-col-md10 layui-col-md-offset1 no_touch" onClick="toPlay(' + '\'' + progressId + '\', ' + canvasInfo.id + ')">' +
                    '<div class="layui-card">' +
                    '<div class="layui-card-header"><h1 style="display: inline">' + canvasInfo.name +
                    '</h1><span style="color: red">&nbsp;&nbsp;连击5次进入战场~~~~</span></div>' +
                    '<div class="layui-card-body">' +
                    '<br>' +
                    '<span>' + canvasInfo.height + ' X ' + canvasInfo.width + '</span><span style="color: red;font-size: large">&nbsp;&nbsp;超大地图!</span>' +
                    '<br>' +
                    '<span>' + canvasInfo.totalJoinedUser + '个</span><span style="color: red;font-size: large">&nbsp;&nbsp;用户共同作战!</span>' +
                    '<br>' +
                    '<span>' + canvasInfo.totalPaintedPoints + '次</span><span style="color: red;font-size: large">&nbsp;&nbsp;累计作画!</span>' +
                    '<br>' +
                    limitHtml +
                    '<br>' +
                    '<br>' +
                    '<span style="color: red;font-size: large">心动不如行动，赶紧动动你的小手加入战场吧！</span>' +
                    '<br>' +
                    '<br>' +
                    '<div class="layui-progress layui-progress-big" lay-filter="' + progressId + '">' +
                    '<div class="layui-progress-bar" lay-percent="0%" id="' + progressId + '"></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                panels.push(panelHtml);
            }
            document.getElementById("canvasPanelList").innerHTML = document.getElementById("canvasPanelList").innerHTML + panels.join("");

        }
    });
}

loadCanvasPanel();

/**
 * 进入到指定的画布
 * @param canvasId 画布ID
 */
function toPlay(progressId, canvasId) {

    let progress = document.getElementById(progressId);
    let currentPercentStr = progress.getAttribute("lay-percent").toString();
    let currentPercent = parseInt(currentPercentStr.replace('%', ''));
    if (currentPercent <= 80) {
        currentPercent += 20;
    }

    layui.element.progress(progressId, currentPercent + "%");
    if (currentPercent === 100) {
        sessionStorage.setItem("canvasId", canvasId + "");
        layer.msg("敌军还有五秒到达战场，碾碎他们!",
            {
                time: 1000
            },
            function () {
                window.location.href = "../chaos/play.html";
            });

    }

}
